import { useNavigate } from 'react-router-dom';
import { supabase } from '../lib/supabase';

function HomePage() {
  const navigate = useNavigate();

  const handleStartGame = async () => {
    const roomNumber = Math.floor(100000 + Math.random() * 900000);

    const { data, error } = await supabase
      .from('chat_rooms')
      .insert([{ room_number: roomNumber, status: 'waiting' }])
      .select()
      .maybeSingle();

    if (error) {
      console.error('Error creating room:', error);
      return;
    }

    if (data) {
      navigate(`/chat/${data.room_number}`);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex flex-col items-center justify-center p-4">
      <div className="text-center space-y-12">
        <h1 className="text-6xl font-bold text-slate-800 tracking-tight">
          AI 脑筋急转弯
        </h1>

        <button
          onClick={handleStartGame}
          className="px-16 py-6 text-2xl font-semibold text-slate-700 bg-white border-4 border-slate-700 rounded-2xl hover:bg-slate-700 hover:text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105"
        >
          开始游戏
        </button>
      </div>
    </div>
  );
}

export default HomePage;
